<template>
	<view class="scroll-style">
		<scroll-view class="scroll-view" scroll-y>
			<view class="headline">选择帮助金额</view>
			<view class="money-box">
				<block v-for="(item, index) in list" :key="index">
					<view class="money-btn" :class="item.id == selectedMoney.id ? 'highlight' : ''" @click="clickMoney(item)">
						<view v-if="item.id == selectedMoney.id" class="icon">
							<u-icon name="checkbox-mark" color="#fff"></u-icon>
						</view>
						<text>{{item.money}}元</text>
					</view>
				</block>
				<view class="other-amount">
					<input class="input" v-model="model.money" type="number" @focus="focus" placeholder="其他金额"/>
					<text>元</text>
				</view>
			</view>
			<view class="headline">捐赠人信息</view>
			<view class="form-box">
				<u--form ref="jkxxForm" :model="model" :rules="rules" labelWidth="500" labelPosition="top">
					<u-form-item label="捐赠人" prop="donateName" required>
						<input class="form-input" v-model="model.donateName" placeholder="请输入捐赠人姓名, 系统将按照该名称生成捐赠证书"/>
					</u-form-item>
					<u-form-item label="手机号" prop="phone" required>
						<input class="form-input" v-model="model.phone" placeholder="请填写您的有效手机号码"/>
					</u-form-item>
					<u-form-item label="留言">
						<u--textarea v-model="model.remark" placeholder="请输入您的爱心留言, 最多200个字符" :height="100" count maxlength="200"></u--textarea>
					</u-form-item>
				</u--form>
			</view>
			<view class="protocol-box">
				<view @click="change">
					<radio :checked="checked" style="transform:scale(0.7)" color="#FEAB43"/>
				</view>
				<text>我已阅读并同意</text>
				<text class="text">《用户协议》</text>
				<text class="text">《隐私政策》</text>
			</view>
		</scroll-view>
		<view class="bottom-box" @click="pay">立即帮助</view>
	</view>
</template>

<script>
	import { detail, pay } from '@/api/activity/index'
	export default {
		data() {
			return {
				id: undefined,
				list: [{
					id: 1,
					money: 10
				}, {
					id: 2,
					money: 20
				}, {
					id: 3,
					money: 50
				}, {
					id: 4,
					money: 100
				}, {
					id: 5,
					money: 500
				}, {
					id: 6,
					money: 1000
				}],
				selectedMoney: {
					id: undefined,
					money: undefined
				},
				model: {
					activityId: undefined,
					donateName: undefined,
					phone: undefined,
					money: undefined,
					remark: undefined
				},
				rules: {
					donateName: [{
						required: true, 
						message: '请输入捐赠人姓名', 
						trigger: ['blur', 'change']
					}],
					phone: [
						{
							required: true,
							message: '请填写您的有效手机号码',
							trigger: ['change', 'blur']
						}, {
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码格式不正确',
							trigger: ['change','blur']
						}
					]
				},
				checked: false
			}
		},
		onLoad(options) {
			this.id = options.id;
		},
		onReady() {
			this.$refs.jkxxForm.setRules(this.rules);
		},
		methods: {
			/* 选择对应金额 清空自定义金额 */
			clickMoney(item) {
				this.model.money = undefined;
				this.selectedMoney = item;
			},
			
			/* 输入框触发焦点清空选择 */
			focus() {
				this.selectedMoney = {
					id: undefined,
					money: undefined
				}
			},
			
			/* 点击捐款 */
			pay() {
				if (!this.selectedMoney.id && !this.model.money) {
					uni.$u.toast('请输入帮助金额');
					return;
				}
				this.$refs.jkxxForm.validate().then(res => {
					if (!this.checked) {
						uni.$u.toast('请勾选用户协议及隐私政策');
						return;
					}
					let money = this.model.money ? this.model.money : this.selectedMoney.money;
					pay({
						activityId: this.id,
						donateName: this.model.donateName,
						phone: this.model.phone,
						money: money * 100,
						remark: this.model.remark
					}, response => {
						uni.showModal({
							title: '提示',
							content: '捐赠成功',
							showCancel: false,
							success: () => {
								uni.$emit('donationSuccess');
								uni.navigateBack();
							}
						})
					})
				}).catch(errors => {
					
				})
				
				// pay(response => {
				// 	if (typeof WeixinJSBridge === "undefined") {
				// 		if (document.addEventListener) {
				// 			document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
				// 		} else if (document.attachEvent) {
				// 			document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
				// 			document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
				// 		}
				// 	} else {
				// 		this.onBridgeReady(response);
				// 	}
				// })
			},
			
			// onBridgeReady(res) {
			// 	const response = JSON.parse(res);
			// 	console.log(response);
			// 	let that = this;
			// 	if (!response.package) {
			// 		return;
			// 	}
			// 	WeixinJSBridge.invoke(
			// 		'getBrandWCPayRequest', {
			// 			"appId": response.appId, //公众号名称，由商户传入
			// 			"timeStamp": response.timeStamp, //时间戳，自1970年以来的秒数
			// 			"nonceStr": response.nonceStr, //随机串
			// 			"package": response.package,
			// 			"signType": response.signType, //微信签名方式：
			// 			"paySign": response.paySign //微信签名
			// 		},
			// 		function(res) {
			// 			if (res.err_msg === "get_brand_wcpay_request:ok") {
			// 				// 使用以上方式判断前端返回,微信团队郑重提示：
			// 				//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
			// 				uni.showLoading({
			// 					title: '支付成功'
			// 				});
			// 			} else {
			// 				uni.hideLoading();
			// 			}
			// 			WeixinJSBridge.log(response.err_msg);
			// 		}
			// 	);
			// },
			change() {
				this.checked = !this.checked;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		flex: 1;
		overflow-y: auto;
		padding: 0 30rpx;
	}
	
	.headline {
		margin-top: 50rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
	}
	
	.money-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 10rpx;
		.money-btn {
			margin-top: 20rpx;
			width: 210rpx;
			height: 100rpx;
			border-radius: 12rpx;
			border: 1rpx solid #DCDCDC;
			line-height: 100rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			&.highlight {
				background-color: #FDFAF3;
				border: 1rpx solid #FEAB43;
			}
			.icon {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40rpx;
				height: 40rpx;
				background-color: #FEAB43;
				margin-left: 172rpx;
				border-radius: 0 12rpx 0 12rpx;
			}
		}
		
		.other-amount {
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			border: 1rpx solid #DCDCDC;
			border-radius: 12rpx;
			width: 100%;
			height: 100rpx;
			padding: 0 30rpx;
			color: #888888;
			font-size: 36rpx;
			.input {
				font-size: 36rpx;
				flex: 1;
				color: #000000;
				margin-right: 30rpx;
			}
		}
	}
	
	.form-box {
		margin-top: 20rpx;
		.form-input {
			width: 100%;
			border: 1rpx solid $u-border-color;
			height: 75rpx;
			border-radius: 12rpx;
			padding: 0 25rpx;
			font-size: 26rpx;
			color: #000000;
		}
	}
	
	.protocol-box {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #353A45;
		.text {
			color: #F49C01;
		}
	}
	
	.bottom-box {
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		background-image: linear-gradient(to right, #F49C01, #ED810E);
		color: #fff;
		font-size: 32rpx;
		width: 100vw;
		font-weight: bold;
	}
</style>